<template>
  <div>
    <w-cell
      v-for="item in listData"
      :key="item._id"
      :hover="false"
      :operation-width="140"
    >
      <p class="title">
        {{ item.title }}
      </p>
      <p class="content">
        {{ item.link }}
      </p>
      <template slot="option">
        <a-button type="link" size="small" @click="restoreBtnClick(item)">
          还原
        </a-button>
        &nbsp;
        <a-button type="link" size="small" @click="removeBtnClick(item)">
          删除
        </a-button>
      </template>
    </w-cell>
  </div>
</template>

<script>
import { Admin } from '@/config/api'
import WCell from '@/components/global/cell'
export default {
  name: 'AdminRecycleHomeLink',
  layout: 'admin',
  components: {
    WCell
  },
  async asyncData ({ app }) {
    const { $wAxios } = app
    const data = await $wAxios.$get(Admin.homeLink.dustbinList)
    return { listData: data }
  },
  data () {
    return {
      listData: []
    }
  },
  methods: {
    /**
     * 还原按钮点击
     */
    restoreBtnClick (item) {
      this.$wAxios
        .$get(`${Admin.homeLink.dustbinRestore}${item._id}`)
        .then(() => {
          this.$message.success('还原成功')
          this.reload()
        })
        .catch(() => {})
    },
    /**
     * 删除按钮点击
     * @param item
     */
    removeBtnClick (item) {
      this.$wRemovePop(() => {
        return this.$wAxios.$delete(
          `${Admin.homeLink.dustbinDelete}${item._id}`
        )
      }, item.title).then(() => {
        this.reload()
      })
    },
    reload () {
      this.$wAxios
        .$get(Admin.homeLink.dustbinList)
        .then((data) => {
          this.listData = data
        })
        .catch(() => {})
    }
  },
  head () {
    return {
      title: '回收站-首页链接'
    }
  }
}
</script>

<style scoped lang="less"></style>
